<template>
  <div class="css2_8">
      <h1>2.8 多列布局</h1>
      <p>
        <pre>
          column-count实例：将 div 元素中的文本分为三列
&lt;style> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
&lt;/style>
        </pre>
      </p>
        <img src="../assets/images/3.54.png" alt="">
        <p></p>
        <p>
          <pre>
            column-gap实例：规定列间的间隔为50像素
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:50px; /* Firefox */
-webkit-column-gap:50px; /* Safari and Chrome */
column-gap:50px;
}
          </pre>
        </p>
        <img src="../assets/images/3.55.png" alt="">
        <p></p>
        <p>
          <pre>
            column-rule实例：规定列之间的宽度、样式和颜色规则
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
}
          </pre>
        </p>
        <img src="../assets/images/3.56.png" alt="">
        <p></p>
        <p>
          <pre>
            column-fill:
div
{
column-fill:auto;
}
          </pre>
        </p>
        <table border="1px">
          <tr>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>balance</td>
            <td>对列进行协调。浏览器应对列长度的差异进行最小化处理。</td>
          </tr>
          <tr>
            <td>auto</td>
            <td>按顺序对列进行填充，列长度会各有不同。</td>
          </tr>
        </table>
        <p>
          <pre>
            column-span实例：规定元素应横跨多少列
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
h2
{
-webkit-column-span:1; /* Chrome */
column-span:1;
}
          </pre>
        </p>
        <img src="../assets/images/3.57.png" alt="">
        <p></p>
        <p>
          <pre>
            h2
{
-webkit-column-span:all; /* Chrome */
column-span:all;
}
          </pre>
        </p>
        <img src="../assets/images/3.58.png" alt="">
        <table border="1px">
          <tr>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>1</td>
            <td>元素应横跨一列。（默认值）</td>
          </tr>
          <tr>
            <td>all</td>
            <td>元素应横跨所有列。</td>
          </tr>
          <tr>
            <td>column-count</td>
            <td>规定元素应该被分隔的列数。</td>
          </tr>
          <tr>
            <td>column-fill</td>
            <td>规定如何填充列。</td>
          </tr>
          <tr>
            <td>column-gap</td>
            <td>规定列之间的间隔。</td>
          </tr>
          <tr>
            <td>column-rule</td>
            <td>设置所有 column-rule-* 属性的简写属性。</td>
          </tr>
          <tr>
            <td>column-rule-color</td>
            <td>规定列之间规则的颜色。</td>
          </tr>
          <tr>
            <td>column-rule-style</td>
            <td>规定列之间规则的样式。</td>
          </tr>
          <tr>
            <td>column-rule-width</td>
            <td>规定列之间规则的宽度。</td>
          </tr>
          <tr>
            <td>column-span</td>
            <td>规定元素应该横跨的列数。</td>
          </tr>
          <tr>
            <td>column-width</td>
            <td>规定列的宽度。</td>
          </tr>
          <tr>
            <td>columns</td>
            <td>规定设置 column-width 和 column-count 的简写属性。</td>
          </tr>
        </table>
        <p>
          <pre>
            columns：columns 属性是一个简写属性，用于设置列宽和列数
div
{
columns:100px 3;
-moz-columns:100px 3; /* Firefox */
-webkit-columns:100px 3; /* Safari 和 Chrome */
}
          </pre>
        </p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>